<template>
  <div>
    <form @submit.prevent="postData">
      <input type="text" name="" id="" v-model="fruit">
      <button>添加</button>
    </form>
      <input type="text" name="" id="" v-model="put_fruit" placeholder="请输入要修改的内容">
    <ul>
      <li v-for="(item,index) of fruit_list" :key="index">
        {{item}}
        <button @click="delList(index)">删除</button>
        <button @click="putList(index)">修改</button>
      </li>
    </ul>
  </div>
</template>

<script>
// import axios from "../node_modules/_axios@0.19.2@axios/dist/axios"
import axios from "axios";
export default {
  data(){
    return{
      fruit:"",
      fruit_list:[],
      put_fruit:""
    }
  },
  methods:{
    // 获取数据
    getFruitList(){
      axios.get("http://127.0.0.1:3000/fruits").then(res => {
        // console.log(res.data)
       this.fruit_list = res.data
      })
     },
     // 添加数据
     postData(){
       axios.post("http://127.0.0.1:3000/fruits",{
         fruit : this.fruit
       }).then(res => {
       this.fruit_list = res.data
         this.getFruitList()
        //  res.fiuit = ""
       })
       this.fruit = ""
     },
     // 删除功能
     delList(index){
       axios.delete(`http://127.0.0.1:3000/fruits/${index}`)
        .then(res => {
          this.fruit_list = res.data
          this.getFruitList()
        })
     },
     // 修改数据
     putList(index){
       axios.put(`http://127.0.0.1:3000/fruits/${index}`,{
         fruit : this.put_fruit
       })
       .then(res => {
          this.fruit_list = res.data
          this.getFruitList()
       })
     }
  },
  created(){
    this.getFruitList()
  }
}
</script>

<style>

</style>
